<template>
	<view class="recharge-container">
		<!-- 顶部导航栏 -->
		<!-- <view class="header">
			<view class="back-btn" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<text class="title">会员充值</text>
			<view class="header-icons">
				<view class="icon-item">⋯</view>
				<view class="icon-item">−</view>
				<view class="icon-item">◎</view>
			</view>
		</view> -->

		<!-- 主要内容区域 -->
		<view class="content">
			<!-- 会员类型选择 -->
			<view class="member-selection">
				<text class="section-title">选择会员类型</text>
				<view class="member-cards">
					<view 
						class="member-card" 
						:class="{ 'selected': selectedMemberType === memberType.id }"
						v-for="memberType in memberTypes" 
						:key="memberType.id"
						@click="selectMemberType(memberType.id)"
					>
						<view class="card-content">
							<text class="member-type">{{ memberType.name }}</text>
							<text class="member-price">{{ memberType.price }}元</text>
							<text class="member-desc">{{ memberType.description }}</text>
						</view>
						<view class="selection-indicator" v-if="selectedMemberType === memberType.id">
							✓
						</view>
					</view>
				</view>
			</view>

			<!-- 会员权益展示 -->
			<view class="benefits-section" v-if="currentMemberType">
				<text class="section-title">{{ currentMemberType.name }}权益</text>
				<view class="benefits-list">
					<view class="benefit-item" v-for="benefit in currentMemberType.benefits" :key="benefit">
						<text class="benefit-icon">✓</text>
						<text class="benefit-text">{{ benefit }}</text>
					</view>
				</view>
			</view>

			<!-- 支付方式选择 -->
			<view class="payment-section">
				<text class="section-title">支付方式</text>
				<view class="payment-methods">
					<view 
						class="payment-method" 
						:class="{ 'selected': selectedPaymentMethod === method.id }"
						v-for="method in paymentMethods" 
						:key="method.id"
						@click="selectPaymentMethod(method.id)"
					>
						<view class="method-icon">{{ method.icon }}</view>
						<text class="method-name">{{ method.name }}</text>
						<view class="selection-indicator" v-if="selectedPaymentMethod === method.id">
							✓
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部支付栏 -->
		<view class="bottom-bar">
			<view class="total-info">
				<text class="total-text">合计: ¥{{ totalAmount }}</text>
			</view>
			<view class="pay-btn" @click="handlePayment">
				<text class="pay-text">立即支付</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { 
		getMemberTypes, 
		getMemberTypeById, 
		showMemberSelectionToast, 
		showPaymentConfirm, 
		processPayment,
		validatePaymentAmount,
		handlePaymentError,
		showMemberBenefits
	} from '@/utils/member.js';

	export default {
		data() {
			return {
				selectedMemberType: 'normal',
				selectedPaymentMethod: 'wechat',
				memberTypes: getMemberTypes(),
				paymentMethods: [
					{
						id: 'wechat',
						name: '微信支付',
						icon: '💚'
					},
					{
						id: 'alipay',
						name: '支付宝',
						icon: '💙'
					},
					{
						id: 'unionpay',
						name: '银联支付',
						icon: '💛'
					}
				]
			}
		},
		computed: {
			totalAmount() {
				const memberType = getMemberTypeById(this.selectedMemberType);
				return memberType.price;
			},
			currentMemberType() {
				return getMemberTypeById(this.selectedMemberType);
			}
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			selectMemberType(memberTypeId) {
				this.selectedMemberType = memberTypeId;
				showMemberSelectionToast(this.currentMemberType.name);
			},
			selectPaymentMethod(methodId) {
				this.selectedPaymentMethod = methodId;
			},
			showBenefits() {
				showMemberBenefits(this.selectedMemberType);
			},
			async handlePayment() {
				// 验证支付金额
				if (!validatePaymentAmount(this.totalAmount)) {
					return;
				}

				try {
					// 显示支付确认对话框
					const confirmed = await showPaymentConfirm(this.totalAmount, this.currentMemberType.name);
					
					if (confirmed) {
						// 处理支付
						const success = await processPayment(this.totalAmount, this.currentMemberType.name);
						
						if (success) {
							// 支付成功后跳转
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 2000);
						}
					}
				} catch (error) {
					handlePaymentError(error);
				}
			}
		}
	}
</script>

<style scoped>
	.recharge-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
		position: sticky;
		top: 0;
		z-index: 100;
	}

	.back-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon {
		font-size: 36rpx;
		color: #333;
		font-weight: bold;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.header-icons {
		display: flex;
		gap: 15rpx;
	}

	.icon-item {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: #f0f0f0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		color: #666;
	}

	.content {
		flex: 1;
		padding: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.member-cards {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin-bottom: 40rpx;
	}

	.member-card {
		background: linear-gradient(135deg, #007aff 0%, #0056cc 100%);
		border-radius: 16rpx;
		padding: 30rpx;
		position: relative;
		box-shadow: 0 4rpx 20rpx rgba(0, 122, 255, 0.3);
		transition: all 0.3s ease;
	}

	.member-card.selected {
		background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
		box-shadow: 0 4rpx 20rpx rgba(255, 107, 53, 0.3);
	}

	.card-content {
		position: relative;
		z-index: 2;
	}

	.member-type {
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
		display: block;
		margin-bottom: 10rpx;
	}

	.member-price {
		font-size: 48rpx;
		color: #fff;
		font-weight: bold;
		display: block;
		margin-bottom: 10rpx;
	}

	.member-desc {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
		display: block;
	}

	.selection-indicator {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: #fff;
		color: #007aff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-weight: bold;
	}

	.benefits-section {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.benefits-list {
		display: flex;
		flex-direction: column;
		gap: 15rpx;
	}

	.benefit-item {
		display: flex;
		align-items: center;
		gap: 15rpx;
	}

	.benefit-icon {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background-color: #4caf50;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		font-weight: bold;
	}

	.benefit-text {
		font-size: 28rpx;
		color: #333;
	}

	.payment-section {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.payment-methods {
		display: flex;
		flex-direction: column;
		gap: 15rpx;
	}

	.payment-method {
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-radius: 12rpx;
		background-color: #f8f9fa;
		position: relative;
		transition: all 0.3s ease;
	}

	.payment-method.selected {
		background-color: #e3f2fd;
		border: 2rpx solid #007aff;
	}

	.method-icon {
		font-size: 40rpx;
		margin-right: 20rpx;
	}

	.method-name {
		font-size: 28rpx;
		color: #333;
		flex: 1;
	}

	.bottom-bar {
		background-color: #333;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: sticky;
		bottom: 0;
	}

	.total-info {
		display: flex;
		align-items: center;
	}

	.total-text {
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
	}

	.pay-btn {
		background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
		padding: 20rpx 40rpx;
		border-radius: 25rpx;
		box-shadow: 0 4rpx 15rpx rgba(255, 107, 53, 0.3);
	}

	.pay-text {
		font-size: 28rpx;
		color: #fff;
		font-weight: bold;
	}

	/* 动画效果 */
	.member-card:active {
		transform: scale(0.98);
	}

	.payment-method:active {
		transform: scale(0.98);
	}

	.pay-btn:active {
		transform: scale(0.95);
	}
</style> 